<template>
  <!--    标题：场馆预约 需要背景图-->
  <h1>场馆预约</h1>
<!--  <LocalWeather />-->
  <div class="appointment">
    <div>
      <el-form :model="form" label-width="120px" ref="ruleForm">
        <el-form-item label="用户信息" ref="loginForm" :model="user">
<!--          <div class="login"> -->
              <!--  已登录,显示展示姓名 密码和手机号的页面-->
            <!--    个人预约（点击 添加游客[此时默认登录者数据录入]->联动完善个人信息）-->
            <!--    身份证 联系方式 真实姓名-->
            <!--    弹出新页面,作为预约成功提醒-->
            <!--    预约须知提醒-->
          <div class="login-msg">
            <el-form-item label="姓名">
              <el-input v-model="user.userName" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user.email" disabled show-password/>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="user.phone" disabled show-password/>
            </el-form-item>
          </div>
<!--          </div>-->
        </el-form-item>

        <el-form-item label="选择日期" style="width:480px">
          <el-config-provider :locale="locale">
            <el-date-picker
                v-model="form.appointmentDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                :picker-options="pickerOptions"/>
          </el-config-provider>
        </el-form-item>
        <el-form-item label="选择场次">
          <el-select v-model="form.session" placeholder="选择场次">
            <el-option label="上午场" value="上午场" />
            <el-option label="下午场" value="下午场" />
          </el-select>
        </el-form-item>

        <el-form-item label="参观馆区">
          <el-radio-group v-model="form.museumName">
            <el-radio label="宁夏数字工艺博物馆" />
            <el-radio label="中国刀剪剑博物馆" />
            <el-radio label="中国伞博物馆" />
            <el-radio label="中国扇博物馆" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="点击预约">
          <el-button type="primary" @click="check">预约</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div style="margin-bottom: 400px">

    </div>
  </div>
</template>

<script>
import LocalWeather from "@/components/LocalWeather";
import Cookies from 'js-cookie'
import request from "../../../../front_admin/src/utils/request";
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
export default {
  components: {LocalWeather,[ElConfigProvider.name]:ElConfigProvider},
  data() {
    return {
      form:{},
      locale:zhCn,
      user: Cookies.get('user') ? JSON.parse(Cookies.get('user')) :{},
      timeSlots: ['上午', '下午'],
      availableTimeSlots: [],
      selectedTimeSlot: '',
      isLoggedIn: false,
      museumName: '',
      success: false,
      showLoginModal: false,
      userName: '',
      password: '',
      email:'',

      pickerOptions:{
        disabledDate(time){
          return time.getTime() < new Date().getTime() - 8.64e7;
        },
        selectableRange: new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + ' - 23:59:59'
      }
    }
  },
  methods: {
    submitForm() {
      // 发送预约请求到服务器，同时将登录者信息一并发送
      // 省略代码
      this.success = true
    },
    check() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          //  save方法用于提交数据
          this.form.userName = this.user.userName
          this.form.email = this.user.email
          this.form.phone = this.user.phone
          console.log("当前日期是",this.form.appointmentDate)
          this.$notify.success('新增成功')
          // request.post('/appointment/save', this.form).then(res => {
          //   if (res.code === '200'){
          //     // console.log("开始时间是",this.form.startTime)
          //     //  新增成功后resetFields清空输入框内数据
          //     this.$refs['ruleForm'].resetFields();
          //   } else{
          //     this.$notify.error(res.msg)
          //   }
          // })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
//.checkLogin{
//  display:flex;
//
//}
.login-msg{
  display: flex;
  margin-left: -78px;
}
</style>